<template>
  <!-- 国际化 -->
  <a-config-provider :locale="locale">
    <!-- <a-button type="primary" @click="proxy.$goTo('Demo')">demo</a-button>
    <a-button danger @click="proxy.$goTo('Pages')">pages</a-button> -->
    <template v-if="isQiankun">
      <!-- <a-layout style="height: 100%"> -->
        <Content :isQiankun="isQiankun" />
      <!-- </a-layout> -->
    </template>
    <template v-else>
      <PagesView v-if="!router.currentRoute.value.meta.withoutLayout"></PagesView>
      <router-view v-else />
    </template>
    <div class="loading_wrap" v-if="isLoading">
      <a-spin tip="Loading..."></a-spin>
    </div>
    <DynamicLayer></DynamicLayer>

  </a-config-provider>
  <!-- 测试打印 -->
  <!-- <PrintBackList :list="[{ code: 'FBOX000072', retentionPeriodDate: 0, secretLevel: 1, byDate: '20230911-20230911' }]" /> -->
</template>

<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import { dictionaryFn } from '@/filters';
import { getCurrentInstance, computed, onMounted, onBeforeUnmount } from 'vue';
import { useRouter } from 'vue-router';
import PagesView from './views/pages.vue';
import { useCommonStore } from '@/store/modules/common';
import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper';
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import Sidebar from '@/views/layout/sidebar.vue';
import Content from '@/views/layout/content.vue';
import { DynamicLayer } from '@/components/public-template';
import 'dayjs/locale/zh-cn';
// 测试
// import PrintBackList from '@/views/archivesManage/archivesBoxManage/components/printBackList.vue';

const isQiankun = qiankunWindow.__POWERED_BY_QIANKUN__;

const commonStore = useCommonStore();
// 路由
const router = useRouter();
const { proxy }: any = getCurrentInstance();

let isLoading: any = computed(() => commonStore.getIsLoading);
const locale = zhCN;
onMounted(()=>{
  window.addEventListener('resize', handleResize);
  handleResize();
});
onBeforeUnmount(()=>{
  window.removeEventListener('resize', handleResize);
})
const handleResize = ()=> {
  let screenWidth:any = window.innerWidth;
  if( screenWidth < 1024 ){
    screenWidth = 1024
  }else if( screenWidth > 1920 ){
    screenWidth = 1920;
  }
  (<any>document).body.style.zoom = (1 - ( 1920 - screenWidth)/1920) *100 +'%';
}
</script>

<style scoped>
.loading_wrap {
  text-align: center;
  z-index: 1000;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.1);
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
